Vue.component("Login",Vue.extend({
    template:(function () {
         return "<div class='mask'>" +
                "<div class='login_box disFlex'>" +
                    "<div class='bg_red'></div>" +
                    "<div class='login_form_box'>" +
                        "<div class='close_box'><img src='images/close_icon.png' class='close_icon point' @click='closeBtn' alt=''></div>" +
                        "<div class='login_btns'>" +
                             "<span :class='{on:login_type==1}' @click='typeBtn(1)'>登录</span>" +
                             "<span :class='{on:login_type==2}' @click='typeBtn(2)'>注册</span>" +
                         "</div>" +
                        "<ul  class='login_form' v-show='login_type==1'>" +
                            "<li><img src='images/phone2.png' alt=''><input type='text' v-model='phone' placeholder='请输入手机号码'></li>" +
                            "<li><img src='images/pwd.png' alt=''><input :type='isPwd?text:passwordType' v-model='password' placeholder='请输入密码'> " +
                                "<img :src='isPwd?openEye:closeEye' @click='isPwd=!isPwd' class='icon_eye' alt=''>" +
                            "</li>" +
                            "<li class='login_opt'>" +
                            "<em><span :class='{radio:true,on:isLogin}' @click='isLoginBtn' style='margin-right:15px;'><img src='images/right.png' alt=''></span>自动登录</em> <a href='#'>忘记密码</a>" +
                            "</li>" +
                        "</ul>" +
                         "<ul class='login_form' v-show='login_type==2'>" +
                            "<li class='code_box'><img src='images/phone2.png' alt=''><input type='text' v-model='codePhone' placeholder='请输入手机号码'><span class='get_code active' @click='getCodeBtn'>{{codeMsg}}</span></li>" +
                            "<li><img src='images/pwd.png' alt=''><input type='number' v-model='codeLogin' placeholder='请输入验证码'> " +
                            "<li><img src='images/pwd.png' alt=''><input :type='isCodePwd?text:passwordType' v-model='password' placeholder='请输入密码'> " +
                                "<img :src='isCodePwd?openEye:closeEye' @click='isCodePwd=!isCodePwd' class='icon_eye' alt=''>" +
                            "</li>" +
                         "</ul>" +
                         "" +
                         "" +
                        "<div class='login_sumbit_btn' @click='submitBtn'>{{type==1?'登陆':'注册'}}</div>"+

                    "</div>"+
                "</div>" +
            "</div>"
    })() ,
    data:function () {
        return {
            text:'text',
            passwordType:'password',
            openEye:"images/eye.png",closeEye:"images/eye_x.png",
            type:1, //1 登录 2 注册
            phone:"",
            password:"",
            isPwd:true,
            isLogin:true,

            isCodePwd:true,
            codePhone:'',
            codeLogin:'',
            codePwd:'',
            codeIf:true,
            codeTime:60,
            codeInter:"",
            codeMsg:'获取验证码',
            // loginType:1
        }
    },

    methods:{
        closeBtn:function () {
            this.$emit("close",false)
        },
        //获取手机验证码
        getCodeBtn:function () {
            var regPhone=/^[1][3,4,5,7,8,9][0-9]{9}$/;
            var that = this;
            if(!this.codePhone){
                this.$emit("tip",{msg:"请输入手机号码"});
                return true;
            }else if(!regPhone.test(this.phone)){
                this.$emit("tip",{msg:"请输入正确的手机号码"})
                return true;
            }
            if(this.codeIf){
                this.codeIf=false;
                this.codeInter=setInterval(function () {
                    that.codeTime=that.codeTime -1;
                    if(that.codeTime>0){
                        that.codeMsg=that.codeTime+'s重新获取'
                    }else{
                        that.codeTime=60;
                        that.codeMsg="重新获取";
                        that.codeIf=true;
                        clearInterval(that.codeInter)
                    }
                },1000)
            }
        },
        isLoginBtn:function () {this.isLogin=!this.isLogin;},
        //登陆注册
        submitBtn:function () {
            var regPhone=/^[1][3,4,5,7,8,9][0-9]{9}$/
            if(this.type===1){ //登陆
                if(!this.phone){
                    this.$emit("tip",{msg:"请输入手机号码"});
                    return true;
                }else if(!regPhone.test(this.phone)){
                    this.$emit("tip",{msg:"请输入正确的手机号码"});
                    return true;
                }
                if(!this.password){
                    this.$emit("tip",{msg:"请输入密码"});
                    return true;
                }
                
            }else if(this.type===2) { //注册

            }

        },
        typeBtn:function (i) {
            this.login_type=i;
        }
    },
    props:['login_type'],
    watch:{

    },
    created:function () {
        var type = this.login_type
        console.log("created",type)
    },
    mounted:function () {
        var type = this.login_type
        console.log("mounted",type)
    },
}))
Vue.component("Password",Vue.extend({
    template:(function () {
        return "<div class='mask'>" +
            "<div class='login_box disFlex'>" +
            "<div class='bg_red'></div>" +
            "<div class='login_form_box'>" +
                "<div class='close_box'><img src='images/close_icon.png' class='close_icon point' @click='closeBtn' alt=''></div>" +
                "<div class='login_btns'>" +
                "<span class='on'>修改密码</span>" +
                "</div>" +
                "<ul  class='login_form' v-show='loginType==1'>" +
                    "<li><img src='images/phone2.png' alt=''><input type='text' v-model='phone' placeholder='请输入手机号码'></li>" +
                    "<li><img src='images/pwd.png' alt=''><input :type='isPwd?text:passwordType' v-model='password' placeholder='请输入密码'> " +
                    "<img :src='isPwd?openEye:closeEye' @click='isPwd=!isPwd' class='icon_eye' alt=''>" +
                    "</li>" +
                "</ul>" +
                "<ul class='login_form' v-show='loginType==2'>" +
                    "<li><img src='images/pwd.png' alt=''><input type='password' v-model='codeLogin' placeholder='请输入新密码'> " +
                    "<li><img src='images/pwd.png' alt=''><input :type='isCodePwd?text:passwordType' v-model='passwordCirform' placeholder='请输入确定密码'> " +
                    "<img :src='isCodePwd?openEye:closeEye' @click='isCodePwd=!isCodePwd' class='icon_eye' alt=''>" +
                    "</li>" +
                "</ul>" +
                "<div class='login_sumbit_btn' @click='submitBtn'>{{type==1?'下一步':'确定'}}</div>"+
                "<div class='text_blue ac mt10'>放弃修改</div>"+
                "</div>"+
            "</div>" +
            "</div>"
    })() ,
    data:function () {
        return {
            text:'text',passwordType:'password',
            openEye:"images/eye.png",closeEye:"images/eye_x.png",
            type:1, //1 登录 2 注册
            phone:"",
            password:"",
            isPwd:false,
            isLogin:false,

            isCodePwd:false,
            codePhone:'',
            codeLogin:'',
            codePwd:'',
            codeIf:true,
            codeTime:60,
            codeInter:"",
            codeMsg:'获取验证码',
            loginType:1,
            passwordCirform:"",
        }
    },

    methods:{
        closeBtn:function () {
            this.$emit("close",false)
        },
        //获取手机验证码
        getCodeBtn:function () {
            var regPhone=/^[1][3,4,5,7,8,9][0-9]{9}$/;
            var that = this;
            if(!this.codePhone){
                this.$emit("tip",{msg:"请输入手机号码"});
                return true;
            }else if(!regPhone.test(this.phone)){
                this.$emit("tip",{msg:"请输入正确的手机号码"})
                return true;
            }
            if(this.codeIf){
                this.codeIf=false;
                this.codeInter=setInterval(function () {
                    that.codeTime=that.codeTime -1;
                    if(that.codeTime>0){
                        that.codeMsg=that.codeTime+'s重新获取'
                    }else{
                        that.codeTime=60;
                        that.codeMsg="重新获取";
                        that.codeIf=true;
                        clearInterval(that.codeInter)
                    }
                },1000)
            }
        },
        isLoginBtn:function () {
            this.isLogin!=this.isLogin;
        },
        //登陆注册
        submitBtn:function () {
            var regPhone=/^[1][3,4,5,7,8,9][0-9]{9}$/
            if(this.type===1){ //登陆
                if(!this.phone){
                    this.$emit("tip",{msg:"请输入手机号码"});
                    return true;
                }else if(!regPhone.test(this.phone)){
                    this.$emit("tip",{msg:"请输入正确的手机号码"});
                    return true;
                }
                if(!this.password){
                    this.$emit("tip",{msg:"请输入密码"});
                    return true;
                }
                this.loginType=2;
                this.type=2;
            }else if(this.type===2) { //注册
                this.$emit("close",false)
            }

        },
        typeBtn:function (i) {
            this.loginType=i;
        }
    },
    created:function () {
        var type = this.loginType
        console.log("created",type)
    },
    mounted:function () {
        var type = this.loginType
        console.log("mounted",type)
    },
}))